<template>
	<view class="component-page">
		<view class="page-header">
			<view class="back-button" @click="backToHome">
				<text class="back-icon">←</text>
				<text>返回</text>
			</view>
			<text class="page-title">二维码组件</text>
		</view>
		
		<view class="demo-section">
			<view class="section-title">
				生成二维码
			</view>
			
			<view class="qrcode-generate">
				<view class="qrcode-container">
					<xl-qrcode 
						ref="qrcodeRef"
						:text="qrcodeText"
						:size="qrcodeSize"
						:foreground="qrcodeColor"
						:background="qrcodeBackgroundColor"
						:logo="qrcodeLogo"
						:logo-size="qrcodeLogoSize"
						:error-correction-level="qrcodeErrorLevel"
						:show-logo-by-default="true"
					></xl-qrcode>
				</view>
				
				<view class="qrcode-options">
					<view class="option-group">
						<text class="option-label">内容</text>
						<input 
							class="option-input" 
							v-model="qrcodeText" 
							placeholder="请输入二维码内容"
						/>
					</view>
					
					<view class="option-group">
						<text class="option-label">大小</text>
						<slider 
							class="option-slider" 
							:min="100" 
							:max="300" 
							:value="qrcodeSize" 
							:step="10"
							show-value
							@change="onSizeChange"
						/>
					</view>
					
					<view class="option-group">
						<text class="option-label">颜色</text>
						<view class="color-options">
							<view 
								v-for="(color, index) in colorOptions" 
								:key="index"
								class="color-item"
								:class="{ active: qrcodeColor === color }"
								:style="{ backgroundColor: color }"
								@click="qrcodeColor = color"
							></view>
						</view>
					</view>
					
					<view class="option-group">
						<text class="option-label">背景色</text>
						<view class="color-options">
							<view 
								v-for="(color, index) in bgColorOptions" 
								:key="index"
								class="color-item"
								:class="{ active: qrcodeBackgroundColor === color }"
								:style="{ backgroundColor: color }"
								@click="qrcodeBackgroundColor = color"
							></view>
						</view>
					</view>
					
					<view class="option-group">
						<text class="option-label">显示Logo</text>
						<switch 
							:checked="!!qrcodeLogo" 
							@change="onLogoChange"
							color="#007aff"
						/>
					</view>
					
					<view class="option-group">
						<text class="option-label">纠错等级</text>
						<radio-group class="radio-group" @change="onErrorLevelChange">
							<label class="radio-label" v-for="item in errorLevels" :key="item.value">
								<radio 
									:value="item.value" 
									:checked="qrcodeErrorLevel === item.value"
									color="#007aff"
								/>
								<text>{{ item.name }}</text>
							</label>
						</radio-group>
					</view>
					
				
				</view>
			</view>
		</view>
		

		
		<view class="demo-section">
			<view class="section-title">功能特性</view>
			<view class="feature-list">
				<view class="feature-item">
					<view class="feature-icon">🎨</view>
					<view class="feature-info">
						<text class="feature-title">自定义样式</text>
						<text class="feature-desc">支持定制颜色、大小和纠错级别</text>
					</view>
				</view>
				<view class="feature-item">
					<view class="feature-icon">🖼️</view>
					<view class="feature-info">
						<text class="feature-title">Logo叠加</text>
						<text class="feature-desc">可在二维码中央添加Logo图片</text>
					</view>
				</view>
				<view class="feature-item">
					<view class="feature-icon">📱</view>
					<view class="feature-info">
						<text class="feature-title">扫码功能</text>
						<text class="feature-desc">集成相机扫描二维码功能</text>
					</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import xlQrcode from '@/components/xl-qrcode/index.vue';

// 二维码引用
const qrcodeRef = ref(null);

// 二维码内容
const qrcodeText = ref('https://example.com/xl-tool');
// 二维码大小
const qrcodeSize = ref(200);
// 二维码颜色
const qrcodeColor = ref('#000000');
// 二维码背景色
const qrcodeBackgroundColor = ref('#ffffff');
// 二维码Logo
const qrcodeLogo = ref('/static/logo.png');
// Logo大小
const qrcodeLogoSize = ref(40); // 设置为40像素
// 纠错等级
const qrcodeErrorLevel = ref('M');
// 扫描结果
const scanResult = ref('');

// 颜色选项
const colorOptions = ref(['#000000', '#007aff', '#4cd964', '#ff3b30', '#5856d6', '#ff9500']);
// 背景色选项
const bgColorOptions = ref(['#ffffff', '#f2f2f7', '#e5f7ff', '#e5ffe5', '#fff5e5', '#f5e5ff']);
// 纠错等级选项
const errorLevels = ref([
	{ name: '低 (7%)', value: 'L' },
	{ name: '中 (15%)', value: 'M' },
	{ name: '高 (25%)', value: 'Q' },
	{ name: '最高 (30%)', value: 'H' }
]);

// 返回首页
const backToHome = () => {
	uni.navigateBack();
};

// 大小变更
const onSizeChange = (e) => {
	qrcodeSize.value = e.detail.value;
};

// Logo显示切换
const onLogoChange = (e) => {
	if (e.detail.value) {
		qrcodeLogo.value = '/static/logo.png';
	} else {
		qrcodeLogo.value = '';
	}
};

// 纠错等级变更
const onErrorLevelChange = (e) => {
	qrcodeErrorLevel.value = e.detail.value;
};

// 保存二维码图片
const saveQrcode = () => {
	if (qrcodeRef.value) {
		qrcodeRef.value.save().then(res => {
			uni.showToast({
				title: '保存成功',
				icon: 'success'
			});
		}).catch(err => {
			uni.showToast({
				title: '保存失败',
				icon: 'none'
			});
		});
	}
};

// 分享二维码
const shareQrcode = () => {
	if (qrcodeRef.value) {
		qrcodeRef.value.toTempFilePath().then(res => {
			uni.shareFileMessage({
				filePath: res.tempFilePath,
				success() {
					uni.showToast({
						title: '分享成功',
						icon: 'success'
					});
				},
				fail() {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					});
				}
			});
		});
	}
};

// 开始扫描二维码
const startScan = () => {
	uni.scanCode({
		scanType: ['qrCode'],
		success: (res) => {
			scanResult.value = res.result;
		},
		fail: () => {
			uni.showToast({
				title: '扫码失败',
				icon: 'none'
			});
		}
	});
};
</script>

<style lang="scss">
.component-page {
	padding: 30rpx;
	background-color: #f7f7f7;
	min-height: 100vh;
	box-sizing: border-box;
}

.page-header {
	display: flex;
	align-items: center;
	margin-bottom: 30rpx;
	
	.back-button {
		display: flex;
		align-items: center;
		padding: 10rpx 0;
		margin-right: 20rpx;
		
		.back-icon {
			font-size: 36rpx;
			margin-right: 6rpx;
		}
	}
	
	.page-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}
}

.demo-section {
	margin-bottom: 30rpx;
	
	.section-title {
		font-size: 30rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}
}

.qrcode-generate {
	background-color: #fff;
	border-radius: 16rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
	overflow: hidden;
	padding: 30rpx;
	
	.qrcode-container {
		display: flex;
		justify-content: center;
		margin-bottom: 30rpx;
		padding: 20rpx 0;
	}
	
	.qrcode-options {
		.option-group {
			margin-bottom: 24rpx;
			
			.option-label {
				font-size: 28rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 12rpx;
				display: block;
			}
			
			.option-input {
				height: 80rpx;
				background-color: #f5f5f5;
				border-radius: 8rpx;
				padding: 0 20rpx;
				font-size: 28rpx;
			}
			
			.option-slider {
				margin: 10rpx 0;
			}
			
			.color-options {
				display: flex;
				flex-wrap: wrap;
				
				.color-item {
					width: 60rpx;
					height: 60rpx;
					border-radius: 8rpx;
					margin-right: 20rpx;
					margin-bottom: 20rpx;
					border: 2rpx solid #ddd;
					transition: all 0.3s;
					
					&.active {
						transform: scale(1.1);
						border: 2rpx solid #007aff;
						box-shadow: 0 2rpx 8rpx rgba(0, 122, 255, 0.3);
					}
				}
			}
			
			.radio-group {
				display: flex;
				flex-wrap: wrap;
				
				.radio-label {
					margin-right: 30rpx;
					margin-bottom: 20rpx;
					font-size: 26rpx;
					display: flex;
					align-items: center;
				}
			}
		}
		
		.action-buttons {
			display: flex;
			margin-top: 40rpx;
			
			.action-button {
				flex: 1;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 28rpx;
				color: #fff;
				background-color: #007aff;
				border-radius: 40rpx;
				margin: 0 20rpx;
				
				&:first-child {
					margin-left: 0;
				}
				
				&:last-child {
					margin-right: 0;
				}
				
				&.share-btn {
					background-color: #4cd964;
				}
			}
		}
	}
}

.qrcode-scan {
	background-color: #fff;
	border-radius: 16rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
	overflow: hidden;
	padding: 30rpx;
	
	.scan-button {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		color: #fff;
		background-color: #007aff;
		border-radius: 40rpx;
		
		.scan-icon {
			margin-right: 10rpx;
			font-size: 32rpx;
		}
	}
	
	.scan-result {
		margin-top: 30rpx;
		background-color: #f5f5f5;
		border-radius: 8rpx;
		padding: 20rpx;
		
		.result-label {
			font-size: 26rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 10rpx;
			display: block;
		}
		
		.result-content {
			font-size: 28rpx;
			color: #666;
			word-break: break-all;
		}
	}
}

.feature-list {
	background-color: #fff;
	border-radius: 16rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
	overflow: hidden;
	padding: 10rpx 0;
	
	.feature-item {
		display: flex;
		align-items: center;
		padding: 24rpx 30rpx;
		border-bottom: 1px solid #f5f5f5;
		
		&:last-child {
			border-bottom: none;
		}
		
		.feature-icon {
			width: 80rpx;
			height: 80rpx;
			border-radius: 16rpx;
			background: linear-gradient(45deg, #10B981, #6EE7B7);
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 40rpx;
			margin-right: 24rpx;
		}
		
		.feature-info {
			flex: 1;
			
			.feature-title {
				font-size: 30rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 6rpx;
				display: block;
			}
			
			.feature-desc {
				font-size: 26rpx;
				color: #666;
				display: block;
			}
		}
	}
}
</style> 